<template>
	<view class="container">
		<!-- 顶部栏 -->
		<view class="header">
			<text class="title">首页</text>
			<view class="notice-icon" @click="goToNotice2">
				<image src="/static/通知.png" mode="aspectFit"></image>
				<view class="badge" v-if="noticeCount > 0">{{noticeCount}}</view>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content">
			<!-- 欢迎信息 -->
			<view class="welcome-box">
				<text class="welcome-text">你好，{{userInfo.sName}}</text>
				<text class="sub-text">今天也要努力学习哦！</text>
			</view>
			
			<!-- 功能卡片 -->
			<view class="card-list">
				<!-- 学习习惯卡片 -->
				<view class="card-item" @click="goToHabit">
					<view class="card-content">
						<image src="/static/生活习惯.png" mode="aspectFit" class="card-icon"></image>
						<view class="card-info">
							<text class="card-title">学习习惯</text>
							<text class="card-desc">记录和培养良好的学习习惯</text>
						</view>
					</view>
					<image src="/static/right.png" mode="aspectFit" class="arrow-icon"></image>
				</view>
				
				<!-- 学习态度卡片 -->
				<view class="card-item" @click="goToAttitude">
					<view class="card-content">
						<image src="/static/态度.png" mode="aspectFit" class="card-icon"></image>
						<view class="card-info">
							<text class="card-title">学习态度</text>
							<text class="card-desc">反思和改进学习态度</text>
						</view>
					</view>
					<image src="/static/right.png" mode="aspectFit" class="arrow-icon"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getUnreadWarningCount, resetUnreadWarningCount } from '@/utils/websocket.js'
	
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync('student') || {
					sName: '同学'
				},
				noticeCount: 0
			}
		},
		onLoad() {
			// 初始化未读消息数量
			this.noticeCount = getUnreadWarningCount();
			
			// 监听未读消息数量变化
			uni.$on('updateUnreadWarningCount', (count) => {
				this.noticeCount = count;
			});
		},
		onUnload() {
			// 移除事件监听
			uni.$off('updateUnreadWarningCount');
		},
		methods: {
			// 跳转到通知页面
			goToNotice() {
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			},
			goToNotice2() {
				// 跳转到预警记录页面时重置未读消息计数
				resetUnreadWarningCount();
				uni.navigateTo({
					url: '/pages/my/warning-record'
				})
			},
			// 跳转到学习习惯页面
			goToHabit() {
				uni.navigateTo({
					url: '/pages/my/habit-record'
				})
			},
			
			// 跳转到学习态度页面
			goToAttitude() {
				uni.navigateTo({
					url: '/pages/my/attitude-record'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.container {
		min-height: 100vh;
		
		.header {
			height: 88rpx;
			background-color: #119790;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			
			.title {
				color: #fff;
				font-size: 32rpx;
				font-weight: 500;
			}
			
			.notice-icon {
				position: relative;
				padding: 10rpx;
				
				image {
					width: 48rpx;
					height: 48rpx;
				}
				
				.badge {
					position: absolute;
					top: 0;
					right: 0;
					background-color: #ff4d4f;
					color: #fff;
					font-size: 20rpx;
					height: 28rpx;
					min-width: 28rpx;
					padding: 0 6rpx;
					border-radius: 14rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		
		.content {
			padding: 30rpx;
			
			.welcome-box {
				background: linear-gradient(135deg, #119790, #17c0b7);
				border-radius: 12rpx;
				padding: 40rpx 30rpx;
				margin-bottom: 30rpx;
				
				.welcome-text {
					color: #fff;
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
					display: block;
				}
				
				.sub-text {
					color: rgba(255, 255, 255, 0.9);
					font-size: 26rpx;
				}
			}
			
			.card-list {
				.card-item {
					background-color: #fff;
					border-radius: 12rpx;
					padding: 30rpx;
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.card-content {
						display: flex;
						align-items: center;
						
						.card-icon {
							width: 80rpx;
							height: 80rpx;
							margin-right: 20rpx;
						}
						
						.card-info {
							.card-title {
								font-size: 32rpx;
								color: #333;
								font-weight: 500;
								margin-bottom: 6rpx;
								display: block;
							}
							
							.card-desc {
								font-size: 24rpx;
								color: #999;
							}
						}
					}
					
					.arrow-icon {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
	}
</style>
